<template>
  <div class="bg">
    <div class="container">
      <div>
        <img
          v-if="versionType === 'jiaokong'"
          src="../../assets/image/urcc.png"
          class="login-img"
          alt=""
        />
        <img
          v-if="versionType === 'nanning'"
          src="../../assets/image/nanning-logo.png"
          class="login-img-2"
          alt=""
        />
      </div>
      <el-form class="demo-ruleForm" ref="ruleForm" :rules="rules" :model="ruleForm">
        <el-form-item prop="username">
          <el-input
            class="input-item"
            v-model="ruleForm.username"
            type="text"
            placeholder="请输入用户名"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            class="input-item"
            v-model="ruleForm.password"
            type="password"
            placeholder="请输入密码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="submit-btn" type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button class="submit-btn" @click="visitorLogin" style="margin: 10px 0 0 0"
            >访客登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style lang="less" scoped>
.submit-btn {
  display: block;
  width: 100%;
}
.bg {
  background-color: #e5e7eb;
  width: 100vw;
  height: 100vh;
  display: block;
  box-sizing: border-box;
  padding-top: 20vh;
  margin: 0;
}
.container {
  display: block;
  width: 300px;
  margin: 0px auto;
  height: 400px;
  color: #666;
  border-radius: 10px;
  background-color: #d9dce2;
  padding: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.dialog-footer {
  height: 240px;
  display: block;
}
.login-img {
  margin-right: 40px;
  width: 260px;
  display: block;
  margin: 20px auto 50px;
}
.login-img-2 {
  margin-right: 40px;
  width: 300px;
  display: block;
  margin: 20px auto 40px;
}
.input-item {
  width: 100%;
}
</style>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      dialogVisible: false,
      versionType: process.env.VUE_APP_BASE_API,
      ruleForm: {
        username: '', //
        password: '', //
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
      },
    };
  },

  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 将用户状态存储到 vuex

          // 路由跳转至 /main/chat
          axios
            .post('/rbac/auth/login', {
              username: this.ruleForm.username,
              password: this.ruleForm.password,
            })
            .then((res) => {
              //
              localStorage.setItem('token', res.data.token);
              // 将用户信息存储到 vuex
              this.$store.commit('setUser', res.data.user_info);
              this.$router.push('/main/chat');
            })
            .catch((err) => {
              console.log(err);
              this.$message.error('登录失败，请检查用户名和密码！');
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 访客登录
    visitorLogin() {
      // /rbac/auth/guest_login
      axios
        .post('rbac/auth/guest_login')
        .then((res) => {
          // this.$store.commit('setUser', res.data.data);
          localStorage.setItem('token', res.data.token);
          this.$store.commit('setUser', res.data.user_info);
          // 将用户信息存储到 vuex
          this.$router.push('/main/chat');
        })
        .catch((err) => {
          this.$message.error('登录失败！');
        });
    },
  },
};
</script>
